// 响应式布局Hook
// 处理窗口大小变化和布局自适应

import { useEffect, useState } from 'react';
import { useLayoutStore } from '../stores/layoutStore';

interface ScreenSize {
  width: number;
  height: number;
  isMobile: boolean;
  isTablet: boolean;
  isDesktop: boolean;
  isLargeDesktop: boolean;
}

// 断点配置
const BREAKPOINTS = {
  mobile: 768,
  tablet: 1024,
  desktop: 1280,
  largeDesktop: 1536,
} as const;

// 最小尺寸限制
const MIN_WINDOW_SIZE = {
  width: 800,
  height: 600,
} as const;

export const useResponsiveLayout = () => {
  const [screenSize, setScreenSize] = useState<ScreenSize>({
    width: window.innerWidth,
    height: window.innerHeight,
    isMobile: window.innerWidth < BREAKPOINTS.mobile,
    isTablet: window.innerWidth >= BREAKPOINTS.mobile && window.innerWidth < BREAKPOINTS.tablet,
    isDesktop: window.innerWidth >= BREAKPOINTS.tablet && window.innerWidth < BREAKPOINTS.desktop,
    isLargeDesktop: window.innerWidth >= BREAKPOINTS.largeDesktop,
  });

  const {
    sidebar,
    panel,
    setSidebarVisible,
    toggleSidebarCollapse,
    setPanelVisible,
    setSidebarWidth,
    setPanelHeight,
  } = useLayoutStore();

  // 更新屏幕尺寸信息
  const updateScreenSize = () => {
    const width = window.innerWidth;
    const height = window.innerHeight;
    
    setScreenSize({
      width,
      height,
      isMobile: width < BREAKPOINTS.mobile,
      isTablet: width >= BREAKPOINTS.mobile && width < BREAKPOINTS.tablet,
      isDesktop: width >= BREAKPOINTS.tablet && width < BREAKPOINTS.desktop,
      isLargeDesktop: width >= BREAKPOINTS.largeDesktop,
    });
  };

  // 自适应布局调整
  const adaptLayout = () => {
    const { width, height } = screenSize;
    
    // 检查最小尺寸限制
    if (width < MIN_WINDOW_SIZE.width || height < MIN_WINDOW_SIZE.height) {
      // 在小屏幕上自动调整布局
      if (width < MIN_WINDOW_SIZE.width) {
        // 自动折叠侧边栏
        if (sidebar.isVisible && !sidebar.isCollapsed) {
          toggleSidebarCollapse();
        }
        
        // 隐藏面板
        if (panel.isVisible) {
          setPanelVisible(false);
        }
      }
    }
    
    // 移动设备适配
    if (screenSize.isMobile) {
      // 移动设备上隐藏侧边栏和面板
      if (sidebar.isVisible) {
        setSidebarVisible(false);
      }
      if (panel.isVisible) {
        setPanelVisible(false);
      }
    }
    
    // 平板设备适配
    else if (screenSize.isTablet) {
      // 平板上折叠侧边栏
      if (sidebar.isVisible && !sidebar.isCollapsed) {
        toggleSidebarCollapse();
      }
      
      // 调整面板高度
      if (panel.isVisible && panel.height > 200) {
        setPanelHeight(200);
      }
    }
    
    // 桌面设备适配
    else if (screenSize.isDesktop) {
      // 桌面上可以展开侧边栏
      if (sidebar.isVisible && sidebar.isCollapsed && sidebar.width > 200) {
        // 但不自动展开，让用户手动控制
      }
      
      // 调整侧边栏宽度
      if (sidebar.isVisible && sidebar.width > width * 0.3) {
        setSidebarWidth(Math.max(200, width * 0.25));
      }
    }
    
    // 大屏设备适配
    else if (screenSize.isLargeDesktop) {
      // 大屏上可以使用更宽的侧边栏
      if (sidebar.isVisible && sidebar.width < 300) {
        setSidebarWidth(320);
      }
    }
  };

  // 监听窗口大小变化
  useEffect(() => {
    const handleResize = () => {
      updateScreenSize();
    };

    window.addEventListener('resize', handleResize);
    
    // 初始化时也要检查
    updateScreenSize();
    
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  // 当屏幕尺寸变化时自适应布局
  useEffect(() => {
    adaptLayout();
  }, [screenSize.width, screenSize.height, screenSize.isMobile, screenSize.isTablet]);

  // 获取当前断点
  const getCurrentBreakpoint = () => {
    if (screenSize.isMobile) return 'mobile';
    if (screenSize.isTablet) return 'tablet';
    if (screenSize.isDesktop) return 'desktop';
    return 'largeDesktop';
  };

  // 检查是否满足最小尺寸要求
  const meetsMinimumSize = () => {
    return screenSize.width >= MIN_WINDOW_SIZE.width && 
           screenSize.height >= MIN_WINDOW_SIZE.height;
  };

  return {
    screenSize,
    currentBreakpoint: getCurrentBreakpoint(),
    meetsMinimumSize: meetsMinimumSize(),
    isCompactMode: screenSize.isMobile || screenSize.isTablet,
    adaptLayout,
    BREAKPOINTS,
    MIN_WINDOW_SIZE,
  };
};
